<template>
    <div>
        <div class="header">
            <p class="title">todos</p>
            <!-- <input class="new-todo" type="text" placeholder="what needs to done?"/> -->
            <input class="new-todo" type="text" placeholder="请填写任务" v-model.trim="name" @keyup.enter="enterName"/>
            
        </div>
    </div>
</template>

<script setup>
// 定义页面的初始化数据name属性，用于表示任务名称
import { ref } from 'vue'
const name = ref('')

// 通过defineEmits()方法来声明自定义事件,自定义任务名称为addTodo
const emit =defineEmits(['addTodo'])

// 通过调用emit()方法触发自定义事件
const enterName = () => {
    emit('addTodo', name.value)
    name.value = ''
}

</script>

<style scoped>
.header{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

}

.title{
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    color: #b83f45;
}

.new-todo{
    width: 93%;
    padding: 20PX 10PX 20PX 50PX;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05);
}
</style>